/*eslint-disable*/
import React, {useState, useEffect} from "react";
import {Checkbox, Form, Input, Tabs, Tooltip, Icon} from "antd";
import Pannel from "./Pannel";
import FlowVariablesSelectorPopover from "./FlowVariablesSelector";

import styles from "./Pannel.less";

const {TabPane} = Tabs;

const PropertyView = Form.create()((props) => {

  const {form, disable, handleGraphChange, selectedModel, handleChangeProperties} = props;
  const {getFieldDecorator} = form;
  const [activeKey, setActiveKey] = useState('1');

  const {properties = {}} = (selectedModel || {}).model || {};

  useEffect(() => {

    const {multiinstance_collection = '', oneVoteVetoType = '', ...rest} = properties;
    let tmpMultiinstance_collection = multiinstance_collection.replace(/\${/, '');
    tmpMultiinstance_collection = tmpMultiinstance_collection.replace(/}/, '');

    const tmpProperties = {
      label: selectedModel?.label ?? '',
      oneVoteVetoType: oneVoteVetoType === '1' || oneVoteVetoType === 1 ? true : false,
      multiinstance_collection: tmpMultiinstance_collection, ...rest
    };
    form.setFieldsValue(tmpProperties);

  }, [properties])

  const formItemLayout = {
    labelCol: {
      xs: {span: 24},
      sm: {span: 7},
    },
    wrapperCol: {
      xs: {span: 24},
      sm: {span: 17},

    },
    labelAlign: 'left',
  };

  const onChanged = (label, value) => {

    handleChangeProperties(
      label,
      value,
      selectedModel.model,
      selectedModel.shape,
      false,
    );

    // handleChangeProperties(
    //   "overrideid",
    //   ev.target.value,
    //   selectedModel.model,
    //   selectedModel.shape,
    //   false,
    // );
  }


  return (
    <div style={{width: '100%', fontSize: '12px'}}>
      <Form form={form} {...formItemLayout}  >
        <Tabs
          activeKey={activeKey}
          style={{width: '100%'}}
          onChange={(key) => setActiveKey(key)}
          size="small"
        >
          <TabPane tab="属性" key="1">
            <Form.Item label="子流程名称: ">
              {getFieldDecorator('label', {
                rules: [
                  {
                    required: true,
                    message: '请输入子流程名称!',
                  },
                ],
              })(<Input placeholder='请输入名称' disable={disable} onChange={e => {
                const value = e.target.value;
                form.setFieldsValue({label: value})
                onChanged('label', value);
                handleGraphChange('label', value, false);
              }}/>)}
            </Form.Item>

            <Form.Item label="子流程编码: ">
              {getFieldDecorator('overrideid', {
                rules: [
                  {
                    required: true,
                    message: '请输入子流程编码!',
                  },
                ],
              })(<Input placeholder='请输入编码' disable={disable} onChange={e => {
                const value = e.target.value;
                form.setFieldsValue({overrideid: value})
                onChanged('overrideid', value);
              }}/>)}
            </Form.Item>

            <Form.Item label="子流程说明: ">
              {getFieldDecorator('description', {
                rules: [
                  {
                    message: '请输入子流程说明!',
                  },
                ],
              })(<Input placeholder='请输入子流程说明' disable={disable}
                        onChange={e => {
                          const value = e.target.value;
                          form.setFieldsValue({description: value})
                          onChanged('description', value);
                        }}/>)}
            </Form.Item>

          </TabPane>
          <TabPane tab="高级设置" key="2">
            <Form.Item>
              {getFieldDecorator('oneVoteVetoType', {
                rules: [],
              })(
                <Checkbox disable={disable}
                          checked={properties.oneVoteVetoType === 1 || properties.oneVoteVetoType === '1'}
                          onChange={e => {
                            const value = e.target.checked ? 1 : 0;
                            form.setFieldsValue({oneVoteVetoType: value})
                            onChanged('oneVoteVetoType', value);
                          }}
                >一票否决</Checkbox>)}
            </Form.Item>
            <div style={{margin: '5px'}}><span>子流程复制变量</span>
              <Tooltip placement="topLeft" title={'通常是一个List类型, List的size决定流程实例数'}>
                <Icon
                  style={{cursor: "pointer"}}
                  theme="filled"
                  type="question-circle"
                />
              </Tooltip>
            </div>
            <Form.Item label=''>
              {getFieldDecorator('multiinstance_collection', {
                rules: [
                  {
                    message: '请输入子流程复制变量说明!',
                  },
                  {
                    pattern: /^[a-zA-Z_][a-zA-Z_0-9-.]*$/,
                    message: "支持字母、数字、小数点、下划线、中划线，须以字母或者下划线开头",
                  },
                ],
              })(<Input placeholder='请输入子流程复制变量说明' disable={disable}
                        onChange={e => {
                          const value = e.target.value;
                          form.setFieldsValue({multiinstance_collection: value})

                        }}
                        onBlur={e => {
                          const value = e.target.value;
                          onChanged('multiinstance_collection', '${' + value + '}');
                        }}
              />)}
            </Form.Item>

            <div style={{margin: '5px'}}><span>子流程实例变量</span>
              <Tooltip placement="topLeft" title={'每个子流程实例接收到的元素的变量名'}>
                <Icon
                  style={{cursor: "pointer"}}
                  theme="filled"
                  type="question-circle"
                />
              </Tooltip>
            </div>
            <Form.Item label=''>
              {getFieldDecorator('multiinstance_variable', {
                rules: [
                  {
                    message: '请输入子流程实例变量说明!',
                  },
                ],
              })(
                <Input
                  placeholder='请输入子流程实例变量说明'
                  disable={disable}
                  onChange={e => {
                          const value = e.target.value;
                          form.setFieldsValue({multiinstance_variable: value})
                          onChanged('multiinstance_variable', value);
                        }}/>)}
            </Form.Item>
          </TabPane>
        </Tabs>
      </Form>
    </div>
  )
})


class GroupSelected extends Pannel {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: "1",
      label: "",
      // description: "",
      conditionsequenceflow: "",
    };
  }

  renderInput() {
    // const { label: inputingLabel } = this.state;
    const {selectedModel = {}, disable} = this.props;
    // const labelValue =
    // inputingLabel === "empty" ? "" : inputingLabel || selectedModel.label;

    return (
      <div className={styles.content_item}>
        {/* <span className={styles.item_label}>名称：</span>
        <Input
          placeholder="请输入名称"
          disabled={disable}
          maxLength={20}
          value={labelValue}
          onChange={(ev) => this.handleChage("label", ev.target.value)}
          onBlur={(ev) => {
            this.handleGraphChange("label", ev.target.value);
          }}

        /> */}

        <PropertyView disable={disable} selectedModel={selectedModel}
                      handleChangeProperties={this.handleChangeProperties} handleGraphChange={this.handleGraphChange}/>

      </div>
    );
  }

  render() {
    const {conditionsequenceflow, activeKey /* , description: inputingDescription */} = this.state;
    const {
      selectedModel = {}, disable, modelProperties: {modelVariables = []},

    } = this.props;
    const {properties = {}} = (selectedModel || {}).model || {};
    const {shape = ""} = selectedModel;

    /*
    const modelDescriptionValue = selectedModel.description || "";
    const descriptionValue =
      inputingDescription === "empty" ? "" : inputingDescription || modelDescriptionValue;
    */

    const condition = conditionsequenceflow === "empty"
      ? ""
      : conditionsequenceflow ||
      properties.conditionsequenceflow;

    return shape === "Subprocess" ? (
      <div
        data-status="group-selected"
        className={`pannel ${styles.tabContent}`}
        id="group_detailpannel"
      >
        <div className={styles.headTitle}>子流程配置</div>

        {selectedModel.gatewaySource ? (
          <Tabs
            activeKey={activeKey}
            className={styles.smallTab}
            onChange={(key) => this.setState({activeKey: key})}
            size="small"
          >
            <TabPane tab="属性" key="1">
              <div
                className={`block-container ${styles.content}`}
                style={selectedModel.gatewaySource ? {} : {marginTop: "16px"}}
              >
                {this.renderInput()}
              </div>
            </TabPane>
            <TabPane tab="条件设置" key="2">
              <div
                className={`block-container ${styles.content}`}
                style={selectedModel.gatewaySource ? {} : {marginTop: "16px"}}
              >
                <div className={styles.content_item} style={{alignItems: 'center'}}>
                  <span className={styles.item_label}>条件表达式：</span>
                  <Input
                    disabled={disable}
                    placeholder={`${"$"}{days<=3}`}
                    value={condition}
                    onChange={(ev) =>
                      this.handleChage("conditionsequenceflow", ev.target.value)
                    }
                    onBlur={(ev) => {
                      this.handleChangeProperties(
                        "conditionsequenceflow",
                        ev.target.value,
                        selectedModel.model,
                        selectedModel.shape,
                      );
                    }}
                    style={{marginRight: 12}}
                  />
                  <FlowVariablesSelectorPopover
                    variables={modelVariables}
                    onSelect={({code}) => {
                      this.handleChangeProperties(
                        "conditionsequenceflow",
                        `${condition}\${${code}}`,
                        selectedModel.model,
                        selectedModel.shape,
                      );
                    }}
                  />

                </div>
              </div>
            </TabPane>
          </Tabs>
        ) : (
          <div
            className={`block-container ${styles.content}`}
            style={selectedModel.gatewaySource ? {} : {marginTop: "16px"}}
          >
            {this.renderInput()}
          </div>
        )}
      </div>
    ) : <></>;
  }
}

export default GroupSelected;

/*
shape === "GroupTaskStart" || shape === "GroupTaskEnd" ? (
          <StartEndDetail
            appId={appId}
            changeModelVariableRef={changeModelVariableRef}
            modelVariableRef={modelVariableRef}
            checkOverrideid={this.checkOverrideid}
            disable={disable}
            dispatch={dispatch}
            modelVariables={modelVariables}
            selectedModel={selectedModel}
            handleChangeMultiProperties={this.handleChangeMultiProperties}
            handleChangeProperties={this.handleChangeProperties}
            handleChangeProperties2={this.handleChangeProperties2}
            handleformVisible={this.handleformVisible}
            handleFormSelect={this.handleFormSelect}
            handleGraphChange={this.handleGraphChange}
            handleHttpCallbackVisible={this.handleHttpCallbackVisible}
            handleUsersSelect={this.handleUsersSelect}
            handleDeleteUsers={this.handleDeleteUsers}
            handleRelationSelect={this.handleRelationSelect}
            handleDeleteRelation={this.handleDeleteRelation}
            modelForms={modelForms}
            formId={formId}
            updateModelForms={updateModelForms}
          >

             </StartEndDetail>
        ):
*/
